<!-- 生产分析 -->
<template>
  <div class="product-analysis">
    <line-logo :name="$i18n.t('mesProduceStatistic.productionAnalysis')" />
    <div class="flex-row">
      <!-- 1 -->
      <div class="flex-box w-per-25 bgc-EFF8FD py-35">
        <div>
          <div class="liquid-chart-box border-64B5EA mr-30">
            <liquid-chart
              :rate="analysisData.startrate || 0"
              fontWeight="bold"
              waterPoloColor="#64B5EA"
              textColor="#0F4161"
              ref="startWorkLiquid"
            />
          </div>
          <div class="text-center">{{ $i18n.t("mesProduceStatistic.timelyStart") }}</div>
        </div>
        <div class="flex-col h-140">
          <order-base-item
            width="auto"
            :title="$i18n.t('mesProduceStatistic.planToStart')"
            :value="analysisData.planstartnum || 0"
            type="bold"
          />
          <order-base-item
            width="auto"
            :title="$i18n.t('mesProduceStatistic.actualWork')"
            :value="analysisData.startnum || 0"
            type="bold"
          />
          <order-base-item
            width="auto"
            :title="$i18n.t('mesProduceStatistic.difference')"
            :value="analysisData.differencenum || 0"
            type="bold"
          />
        </div>
      </div>
      <!-- 2 -->
      <div class="flex-box w-per-25 bgc-E5F9F6 py-35">
        <div>
          <div class="liquid-chart-box border-00BFA5 mr-30">
            <liquid-chart
              :rate="analysisData.endrate || 0"
              fontWeight="bold"
              waterPoloColor="#00BFA5"
              textColor="#004D42"
              ref="completeWorkLiquid"
            />
          </div>
          <div class="text-center">{{ $i18n.t("mesProduceStatistic.timeToComplete") }}</div>
        </div>
        <div class="flex-col h-140">
          <order-base-item
            width="auto"
            :title="$i18n.t('mesProduceStatistic.plan')"
            :value="analysisData.planendnum || 0"
            type="bold"
          />
          <order-base-item
            width="auto"
            :title="$i18n.t('mesProduceStatistic.actualCompletion')"
            :value="analysisData.endnum || 0"
            type="bold"
          />
          <order-base-item
            width="auto"
            :title="$i18n.t('mesProduceStatistic.difference')"
            :value="analysisData.enddifferencenum || 0"
            type="bold"
          />
        </div>
      </div>
      <!-- 3 -->
      <div class="flex-box w-per-25 bgc-FEF8ED py-35">
        <div>
          <div class="liquid-chart-box border-F4BB5B mr-30">
            <liquid-chart
              :rate="analysisData.closerate || 0"
              fontWeight="bold"
              waterPoloColor="#F4BB5B"
              textColor="#634410"
              ref="productWorkLiquid"
            />
          </div>
          <div class="text-center">{{ $i18n.t("mesProduceStatistic.abnormalRate") }}</div>
        </div>
        <div class="flex-col h-140">
          <order-base-item
            width="auto"
            :title="$i18n.t('mesProduceStatistic.abnormalQuantity')"
            :value="analysisData.ngnum || 0"
            type="bold"
          />
          <order-base-item
            width="auto"
            :title="$i18n.t('mesProduceStatistic.hasClosedQuantity')"
            :value="analysisData.closenum || 0"
            type="bold"
          />
          <order-base-item
            width="auto"
            :title="$i18n.t('mesProduceStatistic.difference')"
            :value="analysisData.ngdifferencenum || 0"
            type="bold"
          />
        </div>
      </div>
      <!-- 4 -->
      <div class="flex-box w-per-25 bgc-FEF0EF py-35">
        <div>
          <div class="liquid-chart-box border-F26A60 mr-30">
            <liquid-chart
              :rate="analysisData.sendrate || 0"
              waterPoloColor="#F26A60"
              fontWeight="bold"
              textColor="#751A13"
              ref="dispatchWorkLiquid"
            />
          </div>
          <div class="text-center">{{ $i18n.t("mesProduceStatistic.timelyDelivery") }}</div>
        </div>
        <div class="flex-col h-140">
          <order-base-item
            width="auto"
            :title="$i18n.t('mesProduceStatistic.theNumberOfDelivery')"
            :value="analysisData.qty || 0"
            type="bold"
          />
          <order-base-item
            width="auto"
            :title="$i18n.t('mesProduceStatistic.actualDeliveryNumber')"
            :value="analysisData.actualqty || 0"
            type="bold"
          />
          <order-base-item
            width="auto"
            :title="$i18n.t('mesProduceStatistic.difference')"
            :value="analysisData.senddifferencenum || 0"
            type="bold"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LiquidChart from "./liquid-chart.vue";
import OrderBaseItem from "./order-base-item.vue";
import LineLogo from "./line-logo.vue";
export default {
  name: "",
  components: { LiquidChart, OrderBaseItem, LineLogo },
  props: {
    analysisData: {
      type: Object,
      default: {
        planstartnum: 0,
        startnum: 0,
        differencenum: 0,
        startrate: 0,
        planendnum: 0,
        endnum: 0,
        enddifferencenum: 0,
        endrate: 0,
        ngnum: 0,
        closenum: 0,
        ngdifferencenum: 0,
        closerate: 0,
        qty: 0,
        actualqty: 0,
        senddifferencenum: 0,
      },
    },
  },
  updated() {
    this.$nextTick(() => {
      this.$refs.startWorkLiquid.init();
      this.$refs.completeWorkLiquid.init();
      this.$refs.productWorkLiquid.init();
      this.$refs.dispatchWorkLiquid.init();
    });
  },
};
</script>
<style scoped lang="scss">
.product-analysis {
  padding: 12px 10px 15px;
  background: #fff;

  .liquid-chart-box {
    width: 140px;
    height: 140px;
    padding: 8px;
    background: #ffffff;
    border-radius: 50%;
  }

  .border-64B5EA {
    border: 1px solid #64b5ea;
  }

  .border-00BFA5 {
    border: 1px solid #00bfa5;
  }

  .border-F4BB5B {
    border: 1px solid #f4bb5b;
  }

  .border-F26A60 {
    border: 1px solid #f26a60;
  }

  .w-per-25 {
    width: calc(25% - 10px);
  }

  .bgc-EFF8FD {
    background-color: #eff8fd;
  }

  .bgc-E5F9F6 {
    background-color: #e5f9f6;
  }

  .bgc-FEF8ED {
    background-color: #fef8ed;
  }

  .bgc-FEF0EF {
    background-color: #fef0ef;
  }

  .py-35 {
    padding: 35px 0;
  }

  .flex-box {
    display: flex;
    justify-content: center;
  }

  .flex-col {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  .flex-row {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
  }

  .h-140 {
    height: 140px;
  }

  .mr-30 {
    margin-right: 30px;
  }

  .text-center {
    width: 140px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    margin-top: 15px;
  }
}
</style>
